<script setup lang='ts'>
  import { reactive } from 'vue';
  import request from '@/api/index';
  import { invite_code, room_id, tipsOpenSet } from '@/pinia/getter';
  import { xmloading, copyText, xmtoast } from '@/utils/public';
  import xmimg from '@/components/xmimg.vue';
  const action = reactive({
  })
  const roominfo = reactive({
    img:'',
    name:'',
    hot:0,
    id:'',
    uuid:''
  })
  const userinfo = reactive({
    img:'',
    name:'',
    uuid:'',
    invite_code:''
  })
  const handleGoPage = ()=>{
    const url = `huayu://party.com/liveroom?roomId=${roominfo.id}`
    location.href = url
    xmtoast('若未跳转，请复制房间ID前往CC星球APP内搜索')
    return
  }
  const handleDownload = ()=>{
    location.href = 'http://hyh5.xiaochaipaidui.com/download'
  }
  const getInfo = async()=>{
    const loading = xmloading()
    const res = await request.getInfo({
      code:invite_code.value,
      room_id:room_id.value
    })
    loading.close()
    const { roomInfo={}, userInfo={} } = res.data
    Object.assign(roominfo,roomInfo)
    Object.assign(userinfo,userInfo)
  }
  getInfo()
</script>

<template>
  <div class="content">
    <div v-if="tipsOpenSet" class="popop"></div>
    <div v-if="userinfo.uuid" class="userinfo flex-align-between">
        <div class="flex-align">
          <div class="portrait">
            <xmimg :src="userinfo.img" />
          </div>
          <div>
            <div class="nickName">{{ userinfo.name }}</div>
            <div class="ID">ID:{{ userinfo.uuid }}</div>
          </div>
        </div>
        <dl class="roomId flex-align">
          <dt>
            <p>房间ID：{{ roominfo.uuid }}</p>
          </dt>
          <dd @click="copyText(roominfo.uuid)">复制</dd>
        </dl>
    </div>
    <template v-if="roominfo.id">
      <div class="roomInfo">
        <div class="roomImg">
          <xmimg :src="roominfo.img" />
        </div>
        <dl class="roomName flex-align-between">
          <dt>{{ roominfo.name }}</dt>
          <dd class="flex-align">
            <img src="@/assets/images/icon1.png" class="iconImg">
            <span>{{ roominfo.hot }}</span>
          </dd>
        </dl>
        <div class="codeBox">
          <div class="codeBack flex-align-between">
            <div class="flex-align">
              <span>邀请码</span>
              <div class="code">{{ userinfo.invite_code }}</div>
            </div>
            <div @click="copyText(userinfo.invite_code)" class="but">复制</div>
          </div>
        </div>
      </div>
      <div @click="handleGoPage" class="textBut">进入房间</div>
      <dl class="footerTips">
        <dt>若未跳转，请复制房间ID前往CC星球APP内搜索</dt>
        <dd @click="handleDownload">下载CC星球APP</dd>
      </dl>
    </template>
  </div>
</template>

<style lang='scss' scoped>
  .content {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 24px 24px 0;
    box-sizing: border-box;
    background: #000 url('@/assets/images/backimg.png') left top / 100% 345px no-repeat;
    .popop {
      z-index: 1000;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba($color: #000, $alpha: .3) url('@/assets/images/tipsImg.png') left 20px / 100%  no-repeat;
    }
    .userinfo {
      width: 100%;
      padding: 0 0 16px 0;
      box-sizing: border-box;
      border-bottom: 1px solid rgba($color: #D8D8D8, $alpha: .2);
      .portrait {
        overflow: hidden;
        position: relative;
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        height: 48px;
        margin-right: 12px;
        border-radius: 100%;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          transform: translate(-50%,-50%);
        }
      }
      .nickName {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        margin-right: 12px;
      }
      .ID {
        color: #999;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        margin-top: 6px;
      }
      .roomId {
        overflow: hidden;
        max-width: max-content;
        min-width: 144px;
        height: 24px;
        background: #000;
        border-radius: 8px;
        background: #FF49BF;
        box-sizing: border-box;
        dt {
          overflow: hidden;
          height: 100%;
          padding: 1px 0 1px 1px;
          box-sizing: border-box;
          p {
            height: 100%;
            line-height: 22px;
            color: #FF49BF;
            font-size: 12px;
            font-weight: 400;
            padding: 0 8px 0 10px;
            box-sizing: border-box;
            background: #000;
            border-radius: 7px 0px 0px 7px;
          }
        }
        dd {
          line-height: 24px;
          color: #000;
          font-size: 12px;
          font-weight: 400;
          padding: 0 8px;
          box-sizing: border-box;
        }
      }
    }
    .roomInfo {
      width: 272px;
      margin: 28px auto 30px;
      padding: 16px 0 0;
      box-sizing: border-box;
      background: #fff;
      border-radius: 16px;
      .roomImg {
        position: relative;
        width: 240px;
        height: 240px;
        overflow: hidden;
        border-radius: 8px;
        margin: 0 auto;
        border: 1px solid #FFE0BC;
        box-sizing: border-box;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          border-radius: 7px;
        }
      }
      .roomName {
        padding: 16px 16px 15px;
        dt {
          color: #000;
          font-size: 18px;
          font-weight: 500;
          line-height: 18px;
        }
        dd {
          .iconImg {
            width: 12px;
            height: 12px;
            margin-right: 2px;
          }
          span {
            color: #000;
            font-size: 12px;
            font-weight: 500;
            line-height: 12px;
          }
        }
      }
      .codeBox {
        .codeBack {
          padding: 16px 10px 16px 16px;
          background: #FFB1D9;
          border-radius: 0px 0px 16px 16px;
          span {
            color: #000;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
          }
          .code {
            width: max-content;
            margin: 0 12px 0 8px;
            padding: 9px 18px;
            box-sizing: border-box;
            color: #FF63B3;
            font-size: 18px;
            font-weight: 600;
            line-height: 18px;
            background: #fff;
            border-radius: 8px;
            border: 1px solid #FF2F9F;
            box-sizing: border-box;
          }
          .but {
            padding: 11px 17px 12px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            line-height: 14px;
            text-align: center;
            background: #FF63B3;
            border-radius: 8px;
          }
        }
      }
    }
    .textBut {
      width: max-content;
      margin: 0 auto;
      padding: 18px 104px;
      box-sizing: border-box;
      color: #fff;
      font-size: 16px;
      line-height: 16px;
      font-weight: 500;
      text-align: center;
      background: #FF63B3;
      border-radius: 26px;
    }
    .footerTips {
      color: rgba($color: #fff, $alpha: .5);
      font-size: 12px;
      text-align: center;
      margin-top: 10px;
      dd {
        width: max-content;
        margin: 5px auto 0;
        padding: 0 0 1px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba($color: #fff, $alpha: .5);
      }
    }
  }
</style>